<template>
  <!-- <div>
  我是login 组件
    </div>
 -->

  <!-- :model="ruleForm"
     
  
     
      class="demo-ruleForm" -->
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
      label-width="80px"
      status-icon
    >
      <el-form-item label="用户名" prop="username">
        <i class="iconfont icon-user"></i>
        <el-input v-model="ruleForm.username"> </el-input>
      </el-form-item>
      <el-form-item label="密 码" prop="password">
        <i class="iconfont icon-3702mima"></i>
        <el-input v-model="ruleForm.password"> </el-input>
      </el-form-item>

      <el-form-item>
        <!-- @click="submitForm('ruleForm')" -->
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即登录</el-button
        >
        <!-- @click="resetForm('ruleForm')" -->
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 1. 登录页面的布局
// 通过 Element-UI 组件实现布局

// el-form
// el-form-item
// el-input
// el-button
// 字体图标

import { BaseUrl } from "@/api/config.js";

//  登录请求地址

// http://ludir.cn:8888/api/private/v1/login

var loding = {
  aaa: "",
};


loding.open = (that) => {
  this.aaa = that.$loading({
    lock: true,
    text: "Loading",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
};

loding.close = () => {
  this.aaa.close();
};


// loding.open() 

// loding.close()

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {},
  methods: {
    //基础实现登录基础代码
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     // console.log("valid",valid)  // 如果 valid 为true 那么表示符合上面的验证规则

    //     if (valid) {
    //       const loading = this.$loading({
    //         lock: true,
    //         text: "Loading",
    //         spinner: "el-icon-loading",
    //         background: "rgba(0, 0, 0, 0.7)",
    //       });

    //       this.$http.post(BaseUrl + "login", this.ruleForm).then((res) => {
    //         console.log("login", res.data);

    //         loading.close();
    //       });
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },

    //
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        // console.log("valid",valid)  // 如果 valid 为true 那么表示符合上面的验证规则
        if (!valid) return this.$message.error("用户名或者密码不对");

        // 用户名与密码符合验证规则
      loding.open(this)
        try {
          var res = await this.$http.post(BaseUrl + "login", this.ruleForm);
          if (res) {

            loding.close()
           
            console.log("loginxxxxx", res.data);
          }
        } catch (error) {
          console.log(error);
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //封装一个loading 正在请求的方法
    // getLoading() {
    //   const loading = this.$loading({
    //     lock: true,
    //     text: "Loading",
    //     spinner: "el-icon-loading",
    //     background: "rgba(0, 0, 0, 0.7)",
    //   });

    //   return loading;
    // },
  },
};
</script>

<style scoped>
</style>
